<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
     </el-breadcrumb>
     <!-- 卡片视图 -->
     <el-card>
         <!-- 添加分类按钮 -->
         <el-row>
             <el-col>
                 <el-button type="primary" @click="showAddcateDialog" >添加分类</el-button>
             </el-col>
         </el-row>
         <!-- 表格 -->
       <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true" index-text="#" border :show-row-hover="false">
       <!-- 是否有效 -->
       <template slot="isok" slot-scope="scope">
           <i class="el-icon-success" v-if="scope.row.cate_delete='false'" style="color:lightgreen;"></i>
           <i class="el-icon-error" v-else style="color:red;"></i>
       </template>
       <!-- 排序 -->
     <template slot="order" slot-scope="scope">
       <el-tag type="primary" size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
        <el-tag type="success" size="mini" v-else-if="scope.row.cat_level==1">二级</el-tag>
         <el-tag size="mini" type="warning" v-else>三级</el-tag>
     </template>
     <!-- 操作 -->
      <template slot="opt" slot-scope="scope">
         <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
         <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
      </template>
       </tree-table>
         <!-- 分页区域 -->
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
     </el-card>
<!-- 添加分类的对话框 -->
 <el-dialog
  title="添加分类"
  :visible.sync="addcateDialogVisible"
  width="50%"
  @close="addcateDialogClosed"
  >
  <!-- 添加分类的表单 -->
  <el-form :model="addcateForm" status-icon :rules="addcateFormRules" ref="addcateFormRef" label-width="100px">
  <el-form-item label="分类名称:" prop="cat_name">
    <el-input v-model="addcateForm.cat_name" ></el-input>
  </el-form-item>
  <el-form-item label="父级分类:">
      <!-- options用来指定数据源 -->
      <!-- props用来指定配置对象 -->
      <!-- v-model要绑定一个数组 -->
    <el-cascader
    v-model="selectedKeys"
    :options="parentCateList"
    expandTrigger = "hover"
    :props="cascaderProps"
    @change="parentCateChange"
    clearable
    change-on-select>
    </el-cascader>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addcateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addcate">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
<style lang="less" scoped>
 .treeTable{
     margin-top: 15px;
 }
 .el-cascader{
     width: 100%;
 }
</style>

<script>
export default {
    data(){
        return{
            //数据获取涉及到分页，所以要用queryinfo,用于查询条件
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            //商品分类的数据列表，默认为空
            catelist:[],
            total:0,//这是总数据条数
            //为table指定列的定义
            columns:[
                {label:'分类名称',prop:'cat_name'},
                {label:'是否有效',prop:'',type:'template',template:'isok'},//表示将当前列作为模板列
                {label:'排序',type:'template',template:'order'},
                {label:"操作",type:'template',template:'opt'}
           ],
           //控制添加分类对话框的显示
           addcateDialogVisible:false,
           //添加分类的表单数据对象
           addcateForm:{
               //将要添加的分类的名称
               cat_name:'',
               //父级id
               cat_pid:0,
               //当前分类的等级，默认为一级
               cat_level:0
           },
           //添加分类表单的验证规则对象
           addcateFormRules:{
               cat_name:[
                   {required:true,message:'请输入分类名称',trigger:'blur'}
               ]
           },
           //父级分类的列表，在添加分类对话框展开的时候用
           parentCateList:[],
           //指定级联选择器的配置对象
           cascaderProps:{
               value:'cat_id',//选中之后的值
               label:'cat_name',
               children:'children'
           },
           //选中的父级分类的id数组
           selectedKeys:[],
        }
    },
    created(){
         this.getCateList();
    },
    methods:{
        //获取商品分类数据
       async getCateList(){
        const {data:res} = await this.$http.get('categories',{params:this.queryInfo})
        if(res.meta.status!=200){
            return this.$message.error('获取数据失败')
        }
        this.$message.success('获取数据成功')
        console.log(res.data)
        //把数据列表赋值给数据列表
        this.catelist = res.data.result
        this.total = res.data.total//为总数据条数赋值
        },
        //监听pagesize改变
        handleSizeChange(newsize){
            this.queryInfo.pagesize = newsize
            this.getCateList()
        },
        //监听pagenum的改变
        handleCurrentChange(newnum){
            this.queryInfo.pagenum = newnum
            this.getCateList()
        },
        showAddcateDialog(){
          //先获取父级分类数据，在展示对话框
            this.getParentCateList()
             this.addcateDialogVisible = true
        },
       async getParentCateList(){
         const {data:res} = await this.$http.get('categories',{params:{type:2}})
         if(res.meta.status!=200){
             return this.$message.error('获取父级分类数据失败')
         }
         console.log(res.data)
         this.parentCateList = res.data
        },
        //选择项发生触发这个函数
        parentCateChange(){
                console.log(this.selectedKeys)
                //如果selectedkeys的数组中的length大于0，证明选中的父级分类
                //反之，就说明没有选中任何父级分类
                if(this.selectedKeys.length>0){
                    //父级分类的id
                 this.addcateForm.cat_pid  = this.selectedKeys[this.selectedKeys.length-1]
                  //为当前分类的等级赋值
                this.addcateForm.cat_level = this.selectedKeys.length
                return
                }else{
                    this.selectedKeys.cat_pid = 0
                    this.selectedKeys.cat_level = 0
                }
        },
        //点击按钮添加新的分类
        addcate(){
          console.log(this.addcateForm)
         this.$refs.addcateFormRef.validate(async valid =>{
              if(!valid) return
           const {data:res} = await this.$http.post('categories',this.addcateForm)
               if(res.meta.status!=201){
                   return this.$message.error('添加分类失败')
               }
               this.$message.success('添加分类成功')
               this.addcateDialogVisible = false
               this.getCateList()
               
    })
          
        },
        //监听对话框的关闭事件，重置表单
        addcateDialogClosed(){
           this.$refs.addcateFormRef.resetFields()
           this.selectedKeys = [];
           this.addcateForm.cat_level =0
           this.addcateForm.cat_pid =0
        },

        
    }
}
</script>